<template>
  <section>
    <el-row
      class="top-card"
      :gutter="16"
    >
      <el-col
        :xs="24"
        :sm="12"
        :md="6"
        class="top-card-item"
      >
        <el-skeleton
          :rows="3"
          animated
          :loading="loading"
        >
          <section class="top-card-con">
            <section class="con-main">
              <section class="con-title">
                <span class="title">总销售额</span>
                <el-tooltip
                  effect="dark"
                  content="指标说明"
                  placement="bottom"
                >
                  <span class="help">
                    <el-icon>
                      <warning-filled />
                    </el-icon>
                  </span>
                </el-tooltip>
              </section>

              <section class="amount-price">
                ¥ 126,560
              </section>

              <section class="dashboard">
                <span>
                  周同比
                  <span>12%</span>
                  <span class="icon-up">
                    <el-icon><caret-top /></el-icon>
                  </span>
                </span>
                <span class="ml20">
                  日同比
                  <span>11%</span>
                  <span class="icon-down">
                    <el-icon><caret-bottom /></el-icon>
                  </span>
                </span>
              </section>
            </section>
            <section class="con-bottom">
              日销售额 ￥12,423
            </section>
          </section>
        </el-skeleton>
      </el-col>
      <el-col
        :xs="24"
        :sm="12"
        :md="6"
        class="top-card-item"
      >
        <el-skeleton
          :rows="3"
          animated
          :loading="loading"
        >
          <section class="top-card-con">
            <section class="con-main">
              <section class="con-title">
                <span class="title">访问量</span>
                <el-tooltip
                  effect="dark"
                  content="指标说明"
                  placement="bottom"
                >
                  <span class="help">
                    <el-icon>
                      <warning-filled />
                    </el-icon>
                  </span>
                </el-tooltip>
              </section>

              <section class="amount-price">
                8,846
              </section>

              <visit-counts />
            </section>
            <section class="con-bottom">
              日访问量 ￥12,34
            </section>
          </section>
        </el-skeleton>
      </el-col>
      <el-col
        :xs="24"
        :sm="12"
        :md="6"
        class="top-card-item"
      >
        <el-skeleton
          :rows="3"
          animated
          :loading="loading"
        >
          <section class="top-card-con">
            <section class="con-main">
              <section class="con-title">
                <span class="title">支付笔数</span>
                <el-tooltip
                  effect="dark"
                  content="指标说明"
                  placement="bottom"
                >
                  <span class="help">
                    <el-icon>
                      <warning-filled />
                    </el-icon>
                  </span>
                </el-tooltip>
              </section>

              <section class="amount-price">
                6,560
              </section>

              <pay-account-chart />
            </section>
            <section class="con-bottom">
              转化率 60%
            </section>
          </section>
        </el-skeleton>
      </el-col>
      <el-col
        :xs="24"
        :sm="12"
        :md="6"
        class="top-card-item"
      >
        <el-skeleton
          :rows="3"
          animated
          :loading="loading"
        >
          <section class="top-card-con">
            <section class="con-main">
              <section class="con-title">
                <span class="title">运营活动效果</span>
                <el-tooltip
                  effect="dark"
                  content="指标说明"
                  placement="bottom"
                >
                  <span class="help">
                    <el-icon>
                      <warning-filled />
                    </el-icon>
                  </span>
                </el-tooltip>
              </section>

              <section class="amount-price">
                78%
              </section>

              <section class="dashboard">
                <el-slider v-model="sliderBarVal" />
              </section>
            </section>
            <section class="con-bottom">
              <span>
                周同比
                <span>12%</span>
                <span class="icon-up">
                  <el-icon><caret-top /></el-icon>
                </span>
              </span>
              <span class="ml20">
                日同比
                <span>11%</span>
                <span class="icon-down">
                  <el-icon><caret-bottom /></el-icon>
                </span>
              </span>
            </section>
          </section>
        </el-skeleton>
      </el-col>
    </el-row>

    <section class="second-screen">
      <el-skeleton
        :rows="11"
        animated
        :loading="loading"
      >
        <el-row class="top-content">
          <el-col
            :xs="24"
            :md="8"
            class="left-wrap"
          >
            <section
              class="text"
              :class="activeName === 1 ? 'active' : ''"
              @click="changeTab(1)"
            >
              销售额
            </section>
            <section
              class="text ml-20"
              :class="activeName === 2 ? 'active' : ''"
              @click="changeTab(2)"
            >
              访问量
            </section>
          </el-col>
          <el-col
            :xs="24"
            :md="16"
            class="right-wrap"
          >
            <section
              class="text"
              :class="activeNameRight === 1 ? 'selected' : ''"
              @click="changeRightTab(1)"
            >
              今日
            </section>
            <section
              class="text"
              :class="activeNameRight === 2 ? 'selected' : ''"
              @click="changeRightTab(2)"
            >
              本周
            </section>
            <section
              class="text"
              :class="activeNameRight === 3 ? 'selected' : ''"
              @click="changeRightTab(3)"
            >
              本月
            </section>
            <section
              class="text"
              :class="activeNameRight === 4 ? 'selected' : ''"
              @click="changeRightTab(4)"
            >
              本年
            </section>
            <section class="date-wrap">
              <el-date-picker
                v-model="dateRangeVal"
                style="width: auto;"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </section>
          </el-col>
        </el-row>

        <el-row
          :gutter="20"
          class="main-content"
        >
          <el-col
            :xs="24"
            :md="15"
          >
            <sale-bar />
          </el-col>
          <el-col
            :xs="24"
            :md="8"
          >
            <section class="table-wrap">
              <p class="subtitle">
                门店销售额排名
              </p>
              <ul>
                <li
                  v-for="(item, index) of storeSaleData"
                  :key="index"
                  class="store-sale-item"
                >
                  <p class="item__left">
                    <span
                      :class="[
                        'item__order',
                        index < 3 ? 'special' : ''
                      ]"
                    >
                      {{ index + 1 }}
                    </span>
                    <span class="item__address">{{ item.address }}</span>
                  </p>
                  <span class="item__account">{{ item.account }}</span>
                </li>
              </ul>
            </section>
          </el-col>
        </el-row>
      </el-skeleton>
    </section>

    <el-row
      :gutter="16"
      class="third-screen"
    >
      <el-col
        :sm="24"
        :md="12"
        class="third-screen-item"
      >
        <el-skeleton
          :rows="11"
          animated
          :loading="loading"
        >
          <section class="third-screen-item__content">
            <section class="card-title two-column">
              <span class="text">线上热门搜索</span>
              <el-radio-group v-model="searchType">
                <el-radio-button value="text">
                  文本
                </el-radio-button>
                <el-radio-button value="image">
                  图片
                </el-radio-button>
                <el-radio-button value="video">
                  视频
                </el-radio-button>
              </el-radio-group>
            </section>
            <section style="padding: 18px;">
              <online-hot-search :search-type="searchType" />
            </section>
          </section>
        </el-skeleton>
      </el-col>
      <el-col
        :sm="24"
        :md="12"
        class="third-screen-item"
      >
        <el-skeleton
          :rows="11"
          animated
          :loading="loading"
        >
          <section class="third-screen-item__content">
            <section class="card-title two-column">
              <span class="text">销售额类别占比</span>
              <el-radio-group v-model="channel">
                <el-radio-button value="all">
                  全部渠道
                </el-radio-button>
                <el-radio-button value="online">
                  线上
                </el-radio-button>
                <el-radio-button value="store">
                  门店
                </el-radio-button>
              </el-radio-group>
            </section>
            <pie-sale-account :channel="channel" />
          </section>
        </el-skeleton>
      </el-col>
    </el-row>

    <section class="fourth-screen">
      <el-skeleton
        :rows="11"
        animated
        :loading="loading"
      >
        <tab-list @tab-change="tabChangeHandle" />
        <stack-line :active-tab="activeStoreCode" />
      </el-skeleton>
    </section>
  </section>
</template>

<script lang="ts">
import {
  defineComponent, onMounted, reactive, toRefs, ref,
} from 'vue';

import { WarningFilled, CaretTop, CaretBottom } from '@element-plus/icons-vue';
import dayjs from 'dayjs';

import OnlineHotSearch from './components/online-hot-search.vue';
import PayAccountChart from './components/pay-account-chart.vue';
import PieSaleAccount from './components/pie-sale-account.vue';
import SaleBar from './components/sale-bar.vue';
import StackLine from './components/stack-line.vue';
import TabList from './components/tab-list.vue';
import VisitCounts from './components/visit-counts.vue';

export default defineComponent({
  name: 'HomeIndex',
  components: {
    CaretTop,
    CaretBottom,
    WarningFilled,
    PayAccountChart,
    VisitCounts,
    SaleBar,
    PieSaleAccount,
    OnlineHotSearch,
    TabList,
    StackLine,
  },
  setup() {
    const payAccountRef = ref();
    const visitAccountRef = ref();
    const state = reactive({
      loading: true,
      sliderBarVal: 78,
      activeName: 1,
      activeNameRight: 4,
      dateRangeVal: ['2022-01-01', '2021-12-31'],
      storeSaleData: [
        {
          address: '工专路 0 号店',
          account: '323,234',
        },
        {
          address: '工专路 1 号店',
          account: '323,234',
        },
        {
          address: '工专路 3 号店',
          account: '323,234',
        },
        {
          address: '工专路 4 号店',
          account: '323,234',
        },
        {
          address: '工专路 5 号店',
          account: '323,234',
        },
        {
          address: '工专路 6 号店',
          account: '323,234',
        },
        {
          address: '工专路 7 号店',
          account: '323,234',
        }
      ],
    });
    const channel = ref('all');
    const searchType = ref('text');
    const activeStoreCode = ref('store1');

    const changeRightTab = (status: number) => {
      state.activeNameRight = status;
      if (+status === 1) {
        const day = dayjs().format('YYYY-MM-DD');
        state.dateRangeVal = [day, day];
      } else if (+status === 2) {
        const mondayS = dayjs().startOf('week').format('YYYY-MM-DD');
        const mondayE = dayjs().endOf('week').format('YYYY-MM-DD');
        state.dateRangeVal = [mondayS, mondayE];
      } else if (+status === 3) {
        const monthS = dayjs().startOf('month').format('YYYY-MM-DD');
        const monthE = dayjs().endOf('month').format('YYYY-MM-DD');
        state.dateRangeVal = [monthS, monthE];
      } else if (+status === 4) {
        const yearS = dayjs().startOf('year').format('YYYY-MM-DD');
        const yearE = dayjs().endOf('year').format('YYYY-MM-DD');
        state.dateRangeVal = [yearS, yearE];
      }
    };

    const tabChangeHandle = (tabName:string) => {
      activeStoreCode.value = tabName;
    };

    onMounted(() => {
      setTimeout(() => {
        changeRightTab(4);
        state.loading = false;
      }, 500);
    });

    return {
      ...toRefs(state),
      payAccountRef,
      visitAccountRef,
      changeTab: (status: number) => {
        state.activeName = status;
      },
      activeStoreCode,
      tabChangeHandle,
      changeRightTab,
      channel,
      searchType,
    };
  },
});
</script>
<style lang="scss" scoped>
:deep(.#{$namespace}-slider) {
  width: 100%;
}

.top-card {
  .top-card-item {
    margin-bottom: var(--maia-small-space);
    border-radius: 4px;

    .top-card-con {
      box-sizing: border-box;
      padding: var(--maia-base-space);
      background-color: var(--#{$namespace}-color-white);

      .con-main {
        .amount-price {
          margin-top: 4px;
          font-size: 30px;
          font-weight: 500;
          line-height: 38px;
        }

        .dashboard {
          display: flex;
          align-items: flex-end;
          height: 46px;
        }
      }

      .con-title {
        @include flex-box;

        .title {
          color: var(--maia-color-grey6);
        }

        .help {
          font-size: var(--maia-small-space);
          cursor: pointer;
        }
      }

      .ml20 {
        margin-left: var(--maia-large-space);
      }

      .icon-up,
      .icon-down {
        margin-left: 4px;
        font-size: var(--maia-base-space);
      }

      .icon-up {
        color: #dc5564;
      }

      .icon-down {
        color: #7dd75a;
      }

      .con-bottom {
        padding-top: 8px;
        margin-top: 8px;
        color: var(--#{$namespace}-text-color-regular);
        border-top: 1px solid var(--maia-color-grey-5);
      }
    }
  }
}

.second-screen {
  margin-bottom: var(--maia-small-space);
  background-color: var(--#{$namespace}-color-white);
  border-radius: 4px;

  .top-content {
    box-sizing: border-box;
    padding: 0 var(--maia-small-space);
    border-bottom: 1px solid var(--maia-color-grey-5);

    .left-wrap,
    .right-wrap {
      display: flex;
      align-items: center;

      .text {
        position: relative;
        box-sizing: border-box;
        padding: var(--maia-small-space) 0;
        margin-left: var(--maia-base-space);
        cursor: pointer;

        &:first-child {
          margin-left: 0;
        }

        &.active::after {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 2px;
          content: '';
          background-color: var(--#{$namespace}-color-primary);
        }

        &:hover {
          color: var(--#{$namespace}-color-primary);
        }

        &.selected {
          color: var(--#{$namespace}-color-primary);
        }
      }

      .date-wrap {
        height: 30px;
        margin-left: var(--maia-large-space);
      }
    }

    .right-wrap {
      justify-content: flex-end;
    }
  }

  .main-content {
    box-sizing: border-box;
    height: auto;
    padding: var(--maia-base-space) 0;

    .table-wrap {
      padding: 0 var(--maia-base-space);

      .subtitle {
        margin-top: var(--maia-base-space);
        margin-bottom: var(--maia-mini-space);
        font-size: 14px;
        font-weight: 600;
      }

      .store-sale-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: var(--maia-small-space);

        .item__left {
          display: flex;
          align-items: center;

          .item__order {
            width: var(--maia-large-space);
            height: var(--maia-large-space);
            margin-right: var(--maia-mini-space);
            font-size: var(--maia-base-space);
            font-weight: 600;
            line-height: var(--maia-large-space);
            text-align: center;
            background-color: var(--maia-color-grey-3);
            border-radius: var(--maia-large-space);

            &.special {
              color: #fff;
              background-color: var(--maia-color-grey6);
            }
          }
        }

        .item__account {
          padding-right: var(--maia-large-space);
        }
      }
    }
  }
}

.third-screen-item {
  margin-bottom: var(--maia-small-space);

  .third-screen-item__content {
    height: 100%;
    background-color: var(--#{$namespace}-color-white);
    border-radius: 4px;

    .card-title {
      box-sizing: border-box;
      padding: var(--maia-small-space);
      border-bottom: 1px solid var(--maia-color-grey-5);

      &.two-column {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}

.fourth-screen {
  background-color: var(--#{$namespace}-color-white);
  border-radius: 4px;
}
</style>
